<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>new year count down timer</title>
    <link rel="stylesheet" href="css/countdown-timer.css" />
</head>

<body>
    <h1>新年倒计时</h1>
    <div class="countdown-timer"></div>
    <div class="message"></div>
    <div class="year"></div>

    <!-- <script src="js/countdown.js"></script> -->
    <!-- <script src="js/app.js"></script> -->

    <script>
        class CountDown {
            constructor(expiredDate, onRender, onComplete) {
                this.setExpiredDate(expiredDate);

                this.onRender = onRender;
                this.onComplete = onComplete;
            }

            setExpiredDate(expiredDate) {
                // get the current time
                const currentTime = new Date().getTime();

                // calculate the remaining time 
                this.timeRemaining = expiredDate.getTime() - currentTime;

                this.timeRemaining > 0 ?
                    this.start() :
                    this.complete();
            }


            complete() {
                if (typeof this.onComplete === 'function') {
                    onComplete();
                }
            }
            getTime() {
                return {
                    days: Math.floor(this.timeRemaining / 1000 / 60 / 60 / 24),
                    hours: Math.floor(this.timeRemaining / 1000 / 60 / 60) % 24,
                    minutes: Math.floor(this.timeRemaining / 1000 / 60) % 60,
                    seconds: Math.floor(this.timeRemaining / 1000) % 60
                };
            }

            update() {
                if (typeof this.onRender === 'function') {
                    this.onRender(this.getTime());
                }
            }

            start() {
                // update the countdown
                this.update();

                //  setup a timer
                const intervalId = setInterval(() => {
                    // update the timer  
                    this.timeRemaining -= 1000;
                    // this.timeRemaining = -10;
                    if (this.timeRemaining < 0) {
                        // call the callback
                        complete();

                        // clear the interval if expired
                        clearInterval(intervalId);
                    } else {
                        this.update();
                    }

                }, 1000);
            }
        }
        // ==============================================
        // Get the new year 
        const getNewYear = () => {
            const currentYear = new Date().getFullYear();
            return new Date(`January 01 ${currentYear + 1} 00:00:00`);
        };

        const newYear = '新年快乐';
        // update the year element
        const year = document.querySelector('.year');
        year.innerHTML = getNewYear().getFullYear();

        // select elements
        const app = document.querySelector('.countdown-timer');
        const message = document.querySelector('.message');
        const heading = document.querySelector('h1');

        const render = (time) => {
            app.innerHTML = `
                <div class="count-down">
                    <div class="timer">
                        <h2 class="days">${time.days}</h2>
                        <small>Days</small>
                    </div>
                    <div class="timer">
                        <h2 class="hours">${time.hours}</h2>
                        <small>Hours</small>
                    </div>
                    <div class="timer">
                        <h2 class="minutes">${time.minutes}</h2>
                        <small>Minutes</small>
                    </div>
                    <div class="timer">
                        <h2 class="seconds">${time.seconds}</h2>
                        <small>Seconds</small>
                    </div>
                </div>
                `;
        };


        const showMessage = () => {
            message.innerHTML = `Happy New Year ${newYear}!`;
            app.innerHTML = '';
            heading.style.display = 'none';
        };

        const hideMessage = () => {
            message.innerHTML = '';
            heading.style.display = 'block';
        };

        const complete = () => {
            showMessage();

            // restart the countdown after showing the 
            // greeting message for a day ()
            setTimeout(() => {
                hideMessage();
                countdownTimer.setExpiredDate(getNewYear());
            }, 1000 * 60 * 60 * 24);
        };

        const countdownTimer = new CountDown(
            getNewYear(),
            render,
            complete
        );

    </script>
</body>

</html>